<template>
  <view class="pagecon">
    <head-box :titles="`${details.frontName}阵地详情`"></head-box>
    <image class="_img" :src="details.frontPic" mode="aspectFill"></image>
    <view class="front_box tab-botton">
      <view class="front_title_box">
        <view class="front_title_box_A">
          <view class="front_title">{{ details.frontName }}</view>
          <view class="front_text">{{ details.frontAddress }}</view>
        </view>
        <view class="front_title_box_B">
          <image
            src="../../static/img/Phone.png"
            mode="aspectFill"
            @tap="$api.makePhoneCall(details.frontPhone)"
          ></image>
        </view>
      </view>
      <view class="front_con_box">
        <view class="min_title"> 场地详情 </view>
        <view class="front_con" v-if="isValues">
          <text class="front_count">联系人</text>
          <text >{{ details.frontManager || '暂无' }}</text>
          <text  class="front_count ml">预约电话</text>
          <text  @tap="$api.makePhoneCall(details.frontPhone)">{{
            details.frontPhone || '暂无联系方式'
          }}</text>
        </view>
        <view class="front_con">
          <text class="front_count">容纳人数</text>
          <text> {{ details.frontCapacity || 0 }} 人</text>
        </view>
        <view class="front_con">
          <text class="front_count">服务对象</text>
          <text> {{ details.frontServiceobjDesc || '暂无服务对象' }}</text>
        </view>
        <view class="front_con">
          <text class="front_count">收费标准</text>
          <text> {{ details.frontFee || '免费' }}</text>
        </view>
        <view class="front_con2">
          <view class="front_k1"><text class="front_count">开放时间</text></view>
          <view class="front_count2">
            <view class="item" v-for="(item, index) in timelist" :key="index">{{ item }}</view>
          </view>
        </view>
        <view class="front_con2">
          <view class="front_k1"><text class="front_count">阵地备注</text></view>
          <view class="front_count2">
            <view class="item">{{ details.note || '暂无阵地备注' }}</view>
          </view>
        </view>
        <view class="front_con">
          <text class="front_count">阵地简介</text>
          <text>
            <rich-text
              class="mian_body"
              :nodes="details.frontIntroduce"
              v-if="details.frontIntroduce && details.frontIntroduce.length"
            ></rich-text>
            <text v-else>暂无阵地简介</text>
          </text>
        </view>

        <view class="front_btn">
          <button
            type="primary"
            @tap="$api.handleMenu(`/pages/frontReservation/frontReservation?id=${details.id}`)"
            v-if="!details.frontUrl"
            >线上预约</button
          >
          <!-- <button type="primary" @tap="makePhoneCall" v-if="details.frontUrl==''">电话预约</button> -->
          <button type="primary" @tap="onLine(details.id)" v-else>在线预约</button>
        </view>
      </view>
    </view>
    <tabs-box></tabs-box>
  </view>
</template>

<script>
  import {getGroupUrlCb} from '@/common/type'
  import {gpFrontClick,gpFrontDetail } from '@/api/front'
  import {getGroupUrl } from '@/api/group'
  export default {
    data() {
      return {
        values:'',
        details: {},
        timelist: [], //开放时间
      }
    },
    onLoad(options) {
      this.values = options.value
      this.gpFrontClick(options.id)
      this.gpFrontDetail(options.id)
    },
    onShow(){
      // #ifdef H5
      console.log('分享')
      this.$wxSetShare()
      // #endif
    },
    computed: {
      //如果是爱心驿家、妈咪小屋的联系人和联系电话都隐藏掉
      isValues(){
        return this.details.frontFrom==='1'|| this.details.frontFrom==='2'?false:true
      },
    },
    methods: {
      replaceValue(e) {
        const v = e
          .replace(/1_/g, '星期一 ')
          .replace(/2_/g, '星期二 ')
          .replace(/3_/g, '星期三 ')
          .replace(/4_/g, '星期四 ')
          .replace(/5_/g, '星期五 ')
          .replace(/6_/g, '星期六 ')
          .replace(/7_/g, '星期天 ')
        return v
      },
      //开放时间
      getFrontOpenTimelist(e) {
        const val = this.replaceValue(e)
        this.timelist = []
        let list = e.split(';')
        list = list.sort()
        list.forEach((item, index) => {
          this.timelist.push(this.replaceValue(item))
        })
        this.timelist = val.split(';')
      },
      //点击某个阵地
      async gpFrontClick(id) {
        await gpFrontClick(id)
      },
      //群团信息-查询群团详情
      async gpFrontDetail(id) {
        const { code, result } = await gpFrontDetail(id)
        if (code === 200) {
          this.details = result
          result.frontOpenTime.split(';').forEach((ele) => {
            this.getFrontOpenTimelist(ele)
          })
        }
      },
      //在线预约
      onLine(id) {
        return getGroupUrlCb(getGroupUrl,id)
      },
    },
  }
</script>

<style lang="scss">
  .pagecon {
    min-height: 100vh;
    ._img {
      width: 100%;
      height: 350rpx;
    }
    .front_box {
      padding: 0 30rpx;
    }
  }
  .front_title_box {
    display: flex;
    flex-direction: row;
    padding: 20rpx 0 30rpx 0;
    border-bottom: 1rpx solid #f3f3f3;
    .front_title_box_A {
      width: calc(100% - 50rpx);
      .front_title {
        font-weight: bold;
        font-size: 30rpx;
        margin-bottom: 10rpx;
      }
      .front_text {
        color: #8e8e8e;
        font-size: 24rpx;
      }
    }
    .front_title_box_B {
      width: 52rpx;
      height: 70rpx;
      padding-top: 20rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .front_con_box {
    padding-top: 30rpx;
    .min_title {
      font-size: 32rpx;
      color: #333;
      font-weight: 600;
      border-left: 6rpx solid #0071fc;
      padding-left: 20rpx;
      margin-bottom: 30rpx;
    }
    .front_con {
      padding: 10rpx;
      font-size: 26rpx;
      line-height: 46rpx;
      .front_count {
        background-color: #76a8fe;
        color: #ffffff;
        padding: 0 20rpx;
        border-radius: 24rpx;
        margin-right: 20rpx;
      }
      .ml {
        margin-left: 30rpx;
      }
    }
    .front_con2 {
      padding: 10rpx;
      font-size: 26rpx;
      line-height: 46rpx;
      display: flex;
      flex-direction: row;
      .front_k1 {
        width: 180rpx;
        .front_count {
          background-color: #76a8fe;
          color: #ffffff;
          padding: 0 20rpx;
          border-radius: 24rpx;
        }
      }

      .front_count2 {
        width: 570rpx;
        display: flex;
        display: -webkit-flex;
        -webkit-box-pack: justify;
        flex-direction: row;
        flex-wrap: wrap;
        .item {
          width: 50%;
        }
      }
      .ml {
        margin-left: 30rpx;
      }
      .front_con_box {
      }
    }

    .front_btn {
      margin-top: 40rpx;
    }
  }
</style>
